<template>
	<view class="zaiui-login-content">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" bgColor="#FEEDEB" title="手机号登录"></u-navbar>
		<!-- #endif -->  
		<!-- #ifdef MP-ALIPAY -->  
		<!-- #endif -->
		<view class="logo-view">
			<image class="logo" :src="configInfo.logo" mode="widthFix"></image>
		</view>
		<view class="content">
			<view style="margin-top: 36.36rpx;position: relative;">
				<text class="iconfont dianhua accountandpass"></text>
				<input class="phone-input" type="number" v-model="form.phone" placeholder="请输入手机号"/>
			</view>
			<view style="margin-top: 36.36rpx;display: flex;justify-content: space-between;position: relative;">
				<text class="iconfont code accountandpass"></text>
				<input class="phone-input" v-model="form.code" placeholder="请输入验证码" type="number" />
				<!-- <u-button :text="!isgetCode ? '发送验证码' : codeCountDown" class="btn-code" @tap="getCode"></u-button> -->
				<view class="btn-code" @tap="getCode">{{!isgetCode ? '发送验证码' : codeCountDown}}</view>
			</view>
			
			<view class="right-tip-view">
				<text>没有账号？</text>
				<text class="tap"  @tap="tapRegiter" >立即注册</text>
			</view>
		</view>
		<view class="foot-view">
			<view class="zaiui-btn-view">
				<button class="zaiui-btn" @tap="tapCode">登录</button>
			</view>
			<view class="font-tag-view">
				<view class="font-tag">其他登录方式</view>
				<view class="LognType">
					<text @tap="tapLogin" class="iconfont passLogin" style="color:#FD7783;font-size: 60rpx;"></text>
					<!-- #ifdef MP-WEIXIN -->
					<text class="iconfont weixinLogin" style="color:#28C445;font-size: 60rpx;" @tap="toWeixin"></text>
					<!-- #endif -->  
					<!-- #ifdef MP-ALIPAY -->  
					<text class="iconfont zfbLogin" style="color:#00ABEF;font-size: 60rpx;"></text>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {smsCode,phoneLogin} from '@/common/http/api.js'
	import {configInfo} from '@/common/utils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				configInfo,
				agreement: false,
				form:{
					phone:'',
					code:''
				},
				timer: null,
				isgetCode: false,
				codeCountDown: 60
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			navTo(url) {uni.navigateTo({url})
			},
			// 获取验证码
			getCode(){
				const that = this;
				if(!this.$ut.checkPhone(this.form.phone)){
					this.$ut.msg("请正确输入手机号码")
					return false;
				}else{
					if(!this.timer){
						
						// 在这里发送请求
						smsCode({phone:this.form.phone,type:2}).then(res => {
							this.$ut.msg("验证码发送成功")
							this.isgetCode = true;
							this.timer = setInterval(()=>{
								if(this.codeCountDown > 1){
									this.codeCountDown--
								}else{
									this.isgetCode = false;
									this.codeCountDown = 60;
									clearInterval(this.timer)
									this.timer = null;
								}
							},1000)
						}).catch(err => {
							this.$ut.msg(err.msg)
							this.isgetCode = false;
							this.codeCountDown = 60;
							clearInterval(this.timer)
							this.timer = null
						})
					}else{
						this.$ut.msg("请您稍后再试")
					}
				}
				
			},
			tapCode() {
				if(!this.$ut.checkPhone(this.form.phone)){
					this.$ut.msg("请正确输入手机号码")
					return false;
				}
				if(this.form.code<6){
					this.$ut.msg("请正确验证码")
					return false;
				}
				phoneLogin({account:this.form.phone,phone:this.form.phone,smsCode:this.form.code}).then(res => {
					this.login(res.data)
					this.$ut.msg("登录成功!");
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/index/index'
						})
					}, 1200)
				})
			},
			// 微信登陆
			toWeixin(){
				uni.navigateTo({
					url: '/pages_Me/login/weixinLoging'
				})
			},
			tapRegiter(){ uni.navigateTo({url: '/pages_Me/login/register'})},
			tapLogin() { uni.navigateTo({ url: '/pages_Me/login/login' })}
		}
	}
</script>

<style lang="less" scoped>
// page{
// 	min-height: 100vh;
// 	min-width: 100%;
// }
.zaiui-login-content {
	position: relative;
	background: linear-gradient( 180deg, #FEEDEB 0%, #FFFFFF 70%) !important;
	min-height: 100vh;
	color: #2B2C2D;
	.text-center {
		text-align: center;
	}
	.logo-view { 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 30vh;
		.logo {
			width: 281rpx;
			height: 277rpx;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			
		}
	}
	.content {
		position: relative;
		padding: 0 36.36rpx;
		.title-h {
			font-size: 45.45rpx;
		}
		.introduce {
			color: #909192;
			font-size: 25.45rpx;
			margin: 9.09rpx 0 36.36rpx;
			.tap {
				color: #75A9C2;
			}
		}
		.zaiui-flex-view {
			display: flex;
			.flex-sub {
				flex: 1;
				color: #2B2C2D;
				padding: 18.18rpx 0;
				border-bottom: 1.81rpx solid #EBECED;
				height: 52.72rpx;
			}
			.flex-sub + .flex-sub{
				margin-left: 36.36rpx;
			}
		}
		.phone-input {
			height: 40px;
		    color: #2B2C2D;
		    padding: 0rpx 60rpx;
		    border-bottom: 1.81rpx solid #EBECED;
			background: transparent;
			.input-placeholder {
				color: #DADADA;
				font-size: 29.09rpx;
			}
		}
		.phone-input + .phone-input {
			margin-top: 36.36rpx;
		}
		.checking-view {
			.phone-input {
				font-size: 32.72rpx;
			}
		}
		.right-tip-view {
			color: #c1c1c1;
			font-size: 25.45rpx;
			text-align: right;
			margin-top: 18.18rpx;
			.tap {
				color: #FD7783;
			}
		}
	}
	.zaiui-btn {
		position: relative;
		border: 0;
		width: 100%;
		color: #ffffff;
		line-height: 1;
		height: 81.81rpx;
		padding: 0 29.09rpx;
		font-size: 27.27rpx;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0, 0);
		margin-right: initial;
		border-radius: 654.54rpx;
		background-color: #FF776D;
		&:after {
			display: none;
		}
	}
	.zaiui-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}
	.foot-view {
		width: 100%;
		margin-top: 150rpx;
		.zaiui-btn-view {
			padding: 0 36.36rpx;
		}
		.font-tag-view {
			position: relative;
			text-align: center;
			margin-top: 238rpx;
			width: 100%;
			.font-tag {
				position: relative;
				color: #c1c1c1;
				font-size: 25.45rpx;
			}
			.font-tag + .font-tag {
				margin-left: 63.63rpx;
				&:after {
					content: " ";
					display: block;
					width: 2rpx;
					height: 100%;
					top: 0;
					left: -31.81rpx;
					position: absolute;
					background: #c1c1c1;
					transform: scale(0.5);
					box-sizing: border-box;
					pointer-events: none;
				}
			}
		}
	}
}

.num-lock-view {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #ffffff;
	color: #666666;
	margin-bottom: -2rpx;
	opacity: 0;
	z-index: 99999;
	transition: all 0.3s ease-in-out 0s;
	.num-lock-head {
		background-color: #ffffff;
		color: #666666;
		position: relative;
		font-size: 27.27rpx;
		height: 81.81rpx;
		line-height: 81.81rpx;
		box-shadow: 0 -3.63rpx 9.09rpx rgba(0, 0, 0, 0.05);
		.title {
		    color: #333333;
		    text-align: center;	
		}
		.close {
		    position: absolute;
		    right: 36.36rpx;
		    top: 0;	
		}
		.code-bak-view {
			position: relative;
			text-align: center;
			color: #333333;
			.code-text {
				background: #f1f1f1;
			    padding: 9.09rpx 18.18rpx;
			    border-radius: 90.9rpx;
			}
			.close-icon {
				position: relative;
				font-size: 32.72rpx;
			    margin-left: 25.45rpx;	
			}
		}
	}
	.key-grid-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		.key-item {
			position: relative;
			display: flex;
			padding: 20rpx 0 29.09rpx;
			width: 33.33%;
			transition-duration: 0s;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			flex-direction: column;
			&:after {
			    position: absolute;
			    top: 0;
			    left: 0;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    width: 200%;
			    height: 200%;
			    border-right: 2rpx solid rgba(0, 0, 0, .1);
			    border-bottom: 2rpx solid rgba(0, 0, 0, .1);
			    -webkit-border-radius: inherit;
			    border-radius: inherit;
			    content: " ";
			    -webkit-transform: scale(.5);
			    transform: scale(.5);
			    -webkit-transform-origin: 0 0;
			    transform-origin: 0 0;
			    pointer-events: none;
			}
			&:nth-child(3n):after {
				border-right-width: 0;
			}
			.num {
				font-size: 40rpx;
			    color: inherit;	
			}
			.close {
				font-size: 32.72rpx;
				margin-top: 9.09rpx;
			}
		}
	}
}
.num-lock-view.show {
	opacity: 1;
	
}
.accountandpass{
	position: absolute;
	left: 0rpx;
	top: 16rpx;
	border-right: 2rpx solid #DADADA;
	color: #DADADA;
	padding-right: 8rpx;
}
.btn-code{
	width: 219rpx;
	height: 70rpx;
	line-height: 70rpx;
	box-sizing: border-box;
	text-align: center;
	background: linear-gradient( 90deg, #FD7783 0%, #FD7978 100%);
	border-radius: 23rpx 23rpx 23rpx 23rpx;
	color:#fff;
	margin-left: 30rpx;
}
.LognType{
	width: 40%;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 55rpx;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
</style>
